<template>
  <div :class="`${xvueNameSpace}`">
    <div
      v-loading="isLoading"
      class="config-panel"
    >
      <div
        class="container"
        :class="xvueTheme"
      >
        <el-tabs v-model="activeName">
          <el-tab-pane
            :label="$demoi18n('panel.tab.baseInfo')"
            name="zero"
          >
            <!-- xvue注册的组件 -->
            <xvp-base-info
              ref="xVueBaseInfo"
              :is-hide-share-parameter="true"
              :widget-instance-id="widgetInstanceId"
              :is-exist-config="true"
              :is-hide-save-button="true"
            />
          </el-tab-pane>
          <el-tab-pane
            :label="propertyLabel"
            name="first"
          >
            <panel-property
              ref="panel_property"
              :config="config"
              :widget-instance-id="widgetInstanceId"
              :widget="widget"
            />
          </el-tab-pane>
          <el-tab-pane
            :label="$demoi18n('panel.tab.data')"
            name="second"
          >
            <panel-data
              ref="panel_data"
              :config="config"
              :widget-instance-id="widgetInstanceId"
              :data-source-type-options="isAurora ? auroraDataSourceTypeOptions : dataSourceTypeOptions"
              :is-aurora="isAurora"
              :dataForm="dataForm"
            />
          </el-tab-pane>
          <el-tab-pane
            :label="$demoi18n('panel.tab.linkage')"
            name="third"
          >
            <panel-linkage
              ref="panel_linkage"
              :config="config"
              :widget-instance-id="widgetInstanceId"
            />
          </el-tab-pane>
        </el-tabs>
        <div class="save_box">
          <el-button
            type="primary"
            class="saveBtn"
            @click.stop="saveAllData()"
          >
            {{ $demoi18n('panel.button.apply') }}
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { dataSourceTypeOptions, auroraDataSourceTypeOptions } from '@/common/panel_config';
import PanelProperty from './panel-property';
import PanelData from './panel-data';
import PanelLinkage from '@/components/panel-linkage-new/panel-linkage';
import configPanelBase from '@/mixin/config-panel-base.js';
import HelpManual from '@/components/common/help-manual/help-manual.vue';

export default {
  name: 'PropertyPanelBasicPie',

  components: {
    PanelProperty,
    PanelData,
    PanelLinkage,
    HelpManual,
  },
  mixins: [configPanelBase],
  props: ['config', 'orgConfig', 'widgetInstanceId', 'widget'],
  data() {
    return {
      isLoading: false,
      activeName: window.isLocalEnv ? 'first' : 'zero',
      dataSourceTypeOptions: dataSourceTypeOptions,
      auroraDataSourceTypeOptions,

      // 数据页签中的表单
      dataForm: {
        dataSourceType: '',
        dataSource: '',
        apiCode: '',
        dataPackage: '',
        dataTable: '',
        redisKey: '',
        tableData: [
          {
            field: 's',
            mapping: '',
            explain: this.$demoi18n('panel.label.category'),
          },
          {
            field: 'y',
            mapping: '',
            explain: this.$demoi18n('panel.label.value'),
          },
          {
            field: 'label',
            mapping: '',
            explain: this.$demoi18n('panelData.valueLabelOptional'),
            skipVerification: true,
          },
          {
            field: 'total',
            mapping: '',
            explain: this.$demoi18n('panelData.totalLabelOptional'),
            skipVerification: true,
          },
        ],
      },
      isAurora: this.$platformName === 'Aurora',
    };
  },
  computed: {},
  watch: {},
  methods: {},
};
</script>
<style lang="less" scoped>
// 配置面板通用样式，主要有明亮风格和蓝黑，样式名需一致
@import '../../common/less/config-panel.less';
</style>
